www.gusucode.com > 一款jquery 按钮、滑块、菜单、Tooltip提示框等扁平化插件源码程序 > 一款jquery 按钮、滑块、菜单、Tooltip提示框等扁平化插件/metro/metro/css/puzzleGame.css
@charset "utf-8"; *{padding:0;margin:0;} li{list-style: none;} body{ background-color: #F7F7F7; } #wrap{width:530px;height:320px;margin:50px auto;} /* 左侧选项栏 */ #wrap #left{float:left;width:200px;height:300px;padding-top:20px;font-size:18px;} #wrap #left ul{width:200px;height:300px;} /* 开始游戏与难度选择的统一样式 */ #wrap #left ul li{width:190px;height:50px;line-height:50px;padding-left:10px;position:relative;} #wrap #left ul li span{display:block;width:80px;height:40px;line-height:40px;text-align:center;cursor:pointer;margin:5px 20px 0 0;background:#FFF8DC;border-right:solid 1px #aaa;border-bottom:solid 1px #aaa;position:absolute;top:0;left:100px;} #wrap #left ul li span.mouseOn{border-right:none;border-bottom:none;border-top:solid 1px #aaa;border-left:solid 1px #aaa;} /* 游戏规则样式 */ #wrap #left ul li#gameRule p{height:30px;font-size:15px;} /* 右侧图片 */ #wrap #right{float:left;width:310px;height:300px;padding:10px 0 0 10px;} #wrap #right #imgArea{width:300px;height:300px;position:relative;} #wrap #right #imgArea div.imgCell{float:left;width:73px;height:73px;border:1px solid #fff;border-radius:4px;position:absolute;z-index:10;box-shadow:0px 0px 8px #fff;transition-property:background-position;transition-duration:300ms;transition-timing-function:ease-in-out;} #wrap #right #imgArea div.hover{filter: alpha(opacity=80);opacity:.8;box-shadow: 0px 0px 8px #000;z-index:20;*border:1px solid #09F;}